<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>这里是匹配大厅</h1>
<button type="button" onclick="sendMessage('double')">匹配模式beta(双人)</button>
这是一个匹配大厅，也可以理解为这是一个综合聊天室。可以搞一个类似于qq群的那种，能看到哪个用户在线。例如侧边加一个新栏目用来显示用户？

<!--显示用户状态 匹配中\匹配完成-->
<input id="mes"></input>

<!--显示后台返回结果信息-->
<textarea id="return"></textarea>

<!--显示大厅在线的其他所有用户-->
<ul id="onlineUserList">
    <!--    <li>用户id</li>-->
    <!--    <li>用户名</li>-->
    <!--    <li>-->
    <!--        <button>邀请按钮</button>-->
    <!--    </li>-->
</ul>

<script src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    var id;
    var name;
    var webSocket;
    var list = new Array(); //存储其他在线用户的数组
    axios({
        method: "post",
        url: "http://localhost:8080/YsuCode-demo/getUserSessionServlet",
        data: ""
    }).then(function (resp) {
        var user = resp.data;
        //获得用户数据
        id = user.id;
        name = user.username;
        document.getElementById("mes").value = id + name; //暂时显示一下先
        setWs(id); //用户进入联机大厅
    })

    function setWs(id) {
        //建立websocket连接
        webSocket = new WebSocket('ws://localhost:8080/YsuCode-demo/matchWebSocket/' + id);
        webSocket.onerror = function (event) {
            onError(event)
        };
        webSocket.onopen = function (event) {
            onOpen(event)
        };
        webSocket.onmessage = function (event) {
            onMessage(event)
        };

        function onMessage(event) {
            //回调服务器返回的数据   event.data
            var resp = event.data;
            document.getElementById('return').value += event.data + "\n";

            if (resp == "matchingDouble") {
                //正在匹配中
                alert("正在匹配中");
            } else if (resp.indexOf("isMatch") != -1) {
                //匹配成功后获得对手的id
                var rivalId = resp.slice(7);
                //跳转到题目页面
                window.location.href = "pk12.html?rivalId=" + rivalId;
            } else if (resp.indexOf("已连接") != -1) {
                //获取用户id和name
                var tmp = resp.slice(4).split("&");
                //为list添加已在匹配大厅的用户
                let cur = {
                    curId: tmp[0],
                    curName: tmp[1]
                }
                if (JSON.stringify(list).indexOf(JSON.stringify(cur)) === -1) { //list中没有此用户
                    list.push(cur);
                }
                //把list中的用户显示出来
                let userTable = "<li>用户id</li>\n" +
                    "    <li>用户名</li>\n" +
                    "    <li>\n" +
                    "        <button>邀请按钮</button>\n" +
                    "    </li>";
                for (let i = 0; i < list.length; i++) {
                    userTable += "<li>" + list[i].curId + "</li>\n" +
                        "    <li>" + list[i].curName + "</li>\n" +
                        "    <li>\n" +
                        "        <button>邀请按钮</button>\n" +
                        "    </li>";
                }
                document.getElementById("onlineUserList").innerHTML = userTable;
            } else if (resp.indexOf("已离开") != -1) {
                //获取用户id和name
                var tmp = resp.slice(4).split("&");
                //为list移除已在匹配大厅的用户
                let cur = {
                    curId: tmp[0],
                    curName: tmp[1]
                }
                for (let i = 0; i < list.length; i++) {
                    if (list[i].curId = cur.curId) {
                        list.splice(i, 1); //移除此用户
                    }
                }
                //把list中的用户显示出来
                let userTable = "<li>用户id</li>\n" +
                    "    <li>用户名</li>\n" +
                    "    <li>\n" +
                    "        <button>邀请按钮</button>\n" +
                    "    </li>";
                for (let i = 0; i < list.length; i++) {
                    userTable += "<li>" + list[i].curId + "</li>\n" +
                        "    <li>" + list[i].curName + "</li>\n" +
                        "    <li>\n" +
                        "        <button>邀请按钮</button>\n" +
                        "    </li>";
                }
                document.getElementById("onlineUserList").innerHTML = userTable;
            }
        }

        function onOpen(event) {
            //成功建立连接
        }

        function onError(event) {
            alert(event.data);
        }
    }

    function sendMessage(mes) {
        if (mes == "double") {
            //给后端发送双人匹配申请
            webSocket.send("double");
            return false;
        }

    }
</script>

</body>
</html>